<template>
    <div class="ossManagement">
        <el-container>
            <el-aside width="25%">
                <div class="aside-area">
                    <el-row>
                        <el-link
                            v-for="(item,index) in bucketList" :key="index" :underline="false" class="folder-cls"
                            @click="getByBucket(item)"
                        >
                            <svg-icon name="抽屉" />
                            <el-tooltip v-if="item.name.length>8" placement="bottom">
                                <template #content> {{ item.name }}</template>
                                <p>{{ item.name }}</p>
                            </el-tooltip>
                            <p v-else>{{ item.name }}</p>
                        </el-link>
                    </el-row>
                </div>
            </el-aside>
            <el-container>
                <el-header>
                    <el-page-header v-if="ossParams.folderPath" :content="ossParams.folderPath" @back="backFolder" />
                    <p v-else class="head-bucket-name">{{ ossParams.bucketName }}</p>
                </el-header>

                <el-main v-if="files.length>0">
                    <el-row>
                        <el-link
                            v-for="(item,index) in files" :key="index" :underline="false" class="folder-cls"
                            @click="openFolder(item)"
                        >
                            <svg-icon v-if="item.type==='1'" name="文件夹" />
                            <svg-icon v-else-if="item.type==='2'" name="KHCFDC_TXT" @click="viewFile(item)" @contextmenu.prevent="openMenu($event)" />
                            <image-preview v-else-if="item.type==='3'" :src="item.url" :height="60" />
                            <music-player v-else-if="item.type==='4'" ref="tagItem" :src="item.url" />
                            <svg-icon v-else-if="item.type==='5'" name="word" @click="viewFile(item)" />
                            <svg-icon v-else-if="item.type==='7'" name="excel" @click="viewFile(item)" />
                            <svg-icon v-else-if="item.type==='8'" name="pdf" @click="viewFile(item)" />
                            <svg-icon v-else-if="item.type==='9'" name="ppt" @click="viewFile(item)" />
                            <el-tooltip v-if="item.name.length>10" placement="bottom">
                                <template #content> {{ item.name }}</template>
                                <p>{{ item.name }}</p>
                            </el-tooltip>
                            <p v-else>{{ item.name }}</p>
                        </el-link>
                    </el-row>
                </el-main>
                <div v-else class="empty-area">
                    <el-empty description="空空如也" />
                </div>
                <ul v-show="visible" :style="{position: 'absolute',left:left+'px',top:top+'px'}" class="contextmenu">
                    <li>{{ left }}</li>
                    <li>{{ top }}</li>
                    <li>历史记录</li>
                </ul>
            </el-container>
        </el-container>
        <el-dialog
            v-model="modal.show"
            :title="modal.title"
            width="70%"
        >
            <iframe :src="fileSrc" width="100%" height="600px" />
        </el-dialog>
    </div>
</template>

<script>

import { getBuckets, getFileList } from '@/api/sys/oss'
import MusicPlayer from '@/components/MusicPlayer/index.vue'

export default {
    name: 'OssManagement',
    components: { MusicPlayer },
    data() {
        return {
            visible: false,
            top: 0,
            left: 0,
            bucketList: [],
            files: [],
            ossParams: {
                bucketName: '',
                folderPath: '',
                fileName: ''
            },
            currentPath: '',
            fileSrc: '',
            modal: {
                show: false,
                title: '',
                type: ''
            }
        }
    },
    computed: {
        tableHeight() {
            return window.innerHeight - 275
        }
    },

    watch: {
        visible(value) {
            if (value) {
                document.body.addEventListener('click', this.closeMenu)
            } else {
                document.body.removeEventListener('click', this.closeMenu)
            }
        }
    },
    created() {
        this.getBucketList()
    },

    methods: {
        getBucketList() {
            getBuckets().then(res => {
                if (res.code === '0') {
                    this.bucketList = res.data
                }
            })
        },

        backFolder() {
            this.ossParams.folderPath = this.currentPath ? this.ossParams.folderPath.replace(this.currentPath, '') : this.ossParams.folderPath
            this.ossParams.folderPath = this.ossParams.folderPath.substring(0, this.ossParams.folderPath.lastIndexOf('/'))
            this.getFiles()
        },

        openFolder(obj) {
            if (obj.type === '1') {
                this.currentPath = obj.name
                this.ossParams.folderPath = obj.path.substring(0, obj.path.length - 1)
                this.getFiles()
            }
        },
        getByBucket(obj) {
            this.ossParams = {
                bucketName: obj.name,
                folderPath: '',
                fileName: ''
            }
            this.getFiles()
        },

        stopAllMusicPaly() {
            let arr = this.files.filter(f => f.type === '4')
            for (let i = 0; i < arr.length; i++) {
                this.$refs.tagItem[i].onPause()
            }
        },

        getFiles() {
            this.stopAllMusicPaly()
            getFileList(this.ossParams).then(res => {
                if (res.code === '0') {
                    this.files = res.data
                }
            })
        },

        openMenu(e) {
            const menuMinWidth = 105
            const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
            const offsetWidth = this.$el.offsetWidth // container width
            const maxLeft = offsetWidth - menuMinWidth // left boundary
            const left = e.clientX - offsetLeft // 15: margin right

            if (left > maxLeft) {
                console.log(123)
                this.left = maxLeft
            } else {
                this.left = left
            }
            this.top = e.clientY - 60 // fix 位置bug
            this.visible = true
        },

        viewFile(obj) {
            this.modal.show = true
            this.modal.title = obj.name
            switch (obj.type) {
                case '2':
                case '8':
                    this.fileSrc = obj.url
                    break
                default:
                    this.fileSrc = 'https://view.officeapps.live.com/op/view.aspx?src=' + obj.url
                    break
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.ossManagement {
    background-color: white;
    height: 100%;
    width: 100%;
    padding: 30px;
    position: absolute;
    .aside-area {
        height: 88vh;
        padding: 20px 0;
        border-right: 1px solid #00000021;
    }
    .head-bucket-name {
        font-size: 18px;
        margin: 0;
    }
    .empty-area {
        display: table;
        text-align: center;
        height: 100%;
        .el-empty {
            display: table-cell;
            text-align: -webkit-center;
            vertical-align: middle;
        }
    }
    svg {
        font-size: 50px;
        margin-bottom: 15px;
    }
    .folder-cls {
        padding: 0 30px;
        font-size: 40px;
        text-align: center;
        width: 180px;
        p {
            font-size: 15px !important;
            margin-top: -8px;
            width: 120px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
        }
    }
}
</style>
